<template>
  <div class="activity-card">
    <div class="header">
      <span>俱乐部活动数据</span>
    </div>
    <div class="statistics-row">
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">累计举办活动(或培训)次数</span>
          <span class="number">{{ activityCount }}</span>
        </div>
      </div>
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">累计参与活动人次</span>
          <span class="number">{{ joinPeopleCount }}</span>
        </div>
      </div>
    </div>
    <div class="table-container">
      <div>活动明细</div>
      <el-table :data="tableData" style="width: 100%" size="mini">
        <el-table-column prop="index" label="序号" width="80" />
        <el-table-column prop="name" label="俱乐部名称" />
        <el-table-column
          prop="yearActivityNum"
          label="年均举办活动(或培训)次数"
        />
        <el-table-column prop="yearJoinPeopleNum" label="年均参加人数" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { getActivityData } from "@/api/statistics";

export default {
  data() {
    return {
      activityCount: 0,
      joinPeopleCount: 0,
      tableData: []
    };
  },
  async created() {
    await this.drawChart();
  },
  methods: {
    async drawChart() {
      const res = await getActivityData({ year: new Date().getFullYear() });
      this.activityCount = res.data.activityCount;
      this.joinPeopleCount = res.data.joinPeopleCount;
      this.tableData = res.data.list;
    }
  }
};
</script>

<style scoped>
.activity-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}

.header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.statistics-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  background-color: #f0f2f5;
}

.info {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 4px;
}

.unit-line {
  display: inline-block;
  width: 4px;
  height: 40px;
  background-color: #67c23a;
  margin-right: 8px;
}

.text {
  display: flex;
  flex-direction: column;
}

.unit {
  font-size: 14px;
  color: #999;
}

.number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.table-container {
  margin-top: 20px;
}

:deep(.el-table) {
  --el-table-border-color: #ebeef5;
  --el-table-header-background-color: #f5f7fa;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #f5f7fa;
}
</style>
